<template>
    <div>
        <h1>首页</h1>
        <ul>
            <li>
                <router-link :to="{path:'shouye/navone'}">导航一</router-link>
                <router-link :to="{path:'shouye/navtwo'}">导航二</router-link>
                <router-link :to="{path:'shouye/navthree'}">导航三</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        // 由于keep-alive缓存路由组件包裹router-view是组件的激活与失活（显示与隐藏）不是重建与销毁 created和mounted只执行一次 不包裹的话 创建多少次执行多少次
        created(){
            console.log('created');
        },
        mounted(){
            console.log('mounted');
        },
        // 被keep-alive缓存组件激活时触发
        activated(){
            console.log('这是activated');
        },
        // 被keep-alive缓存组件失活时触发
        deactivated(){
            console.log('这是deactivated');
        }
    }
</script>

<style lang="less" scoped>
    
</style>